<template>
<div class="login-container ub main-center cross-center">
    <el-form @submit.native.prevent="submit" size="medium" :rules="rules" ref="loginForm" :model="loginForm" label-width="80px" class="login-form">
        <el-form-item label>
            <div class="login-title ub main-center cross-center">系统登录</div>
        </el-form-item>
        <el-form-item label prop="username">
            <el-input type="text" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label prop="password">
            <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label prop="code">
            <el-row :gutter="10">
                <el-col :span="16">
                    <el-input v-model="loginForm.code" placeholder="请输入验证码"></el-input>
                </el-col>
                <el-col :span="8">
                    <el-input placeholder="点击刷新" readonly></el-input>
                </el-col>
            </el-row>
        </el-form-item>
        <el-form-item label>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-button class="my-button" type="primary" @click="submit">登录</el-button>
                </el-col>
                <el-col :span="12">
                    <el-button class="my-button" type="primary" @click="restSubmit">重置</el-button>
                </el-col>
            </el-row>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
export default {
    data() {
        return {
            loginForm: {
                username: "",
                password: "",
            },
            rules: {
                username: [{
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    },
                    {
                        min: 1,
                        max: 6,
                        message: '长度在 1 到 6 个字符',
                        trigger: 'blur'
                    }
                ],
                password: [{
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                }],
                code: [{
                    required: true,
                    message: '请输入验证码',
                    trigger: 'blur'
                }]
            },
        };
    },
    methods: {
        //登录事件
        submit() {
            let menuList = [
                        {
                            children: [],
                            code: "sys:shouye",
                            createTime: 1586703509000,
                            icon: "el-icon-copy-document",
                            id: 10,
                            isHome: 0,
                            label: "首页",
                            name: "Desktop",
                            orderNum: 2,
                            parentId: 0,
                            path: "/Desktop",
                            remark: "首页",
                            type: "1",
                            updateTime: 1586337139000,
                            url: "/system/Desktop"
                        },
                        {
                            children: [],
                            code: "sys:Owner",
                            createTime: 1691464271000,
                            icon: "el-icon-s-custom",
                            id: 11,
                            isHome: 0,
                            label: "业主信息管理",
                            name: "OwnerList",
                            orderNum: 3,
                            parentId: 0,
                            path: "/OwnerList",
                            type: "1",
                            updateTime: 1691565988000,
                            url: "/system/OwnerList"
                        },{
                        
                            children: [],
                            code: "sys:Pay",
                            createTime: 1691464271000,
                            icon: "el-icon-menu",
                            id: 12,
                            isHome: 0,
                            label: "缴费信息管理",
                            name: "PayList",
                            orderNum: 5,
                            parentId: 0,
                            path: "/PayList",
                            type: "1",
                            updateTime: 1691565988000,
                            url: "/system/PayList"
                        }, 
                        {
                            children: [],
                            code: "sys:House",
                            createTime: 1586703272000,
                            icon: "el-icon-s-data",
                            id: 13,
                            isHome: 0,
                            label: "房屋信息管理",
                            name: "HouseList",
                            orderNum: 1,
                            parentId: 0,
                            path: "/HouseList",
                            type: "1",
                            updateTime: 1586683590000,
                            url: "/system/HouseList"
                        },
                        {
                            children: [],
                            code: "sys:Park",
                            createTime: 1586683924000,
                            icon: "el-icon-tickets",
                            id: 14,
                            isHome: 0,
                            label: "车位信息管理",
                            name: "ParkList",
                            orderNum: 2,
                            parentId: 0,
                            path: "/ParkList",
                            type: "1",
                            updateTime: 1586683924000,
                            url: "/system/ParkList"
                        },
                         {
                            children: [],
                            code: "sys:Repair",
                            createTime: 1691464271000,
                            icon: "el-icon-rank",
                            id: 15,
                            isHome: 0,
                            label: "报修信息管理",
                            name: "RepairList",
                            orderNum: 3,
                            parentId: 0,
                            path: "/RepairList",
                            type: "1",
                            updateTime: 1691565988000,
                            url: "/system/RepairList"
                        },
                        {
                            children: [],
                            code: "sys:Complaints",
                            createTime: 1691464271000,
                            icon: "el-icon-rank",
                            id: 16,
                            isHome: 0,
                            label: "投诉信息管理",
                            name: "ComplaintList",
                            orderNum: 4,
                            parentId: 0,
                            path: "/ComplaintList",
                            type: "1",
                            updateTime: 1691565988000,
                            url: "/system/ComplaintList"
                        },
            ];
            //路由数据
            let routerList = [{
                    children: [],
                    code: "sys:House",
                    createTime: 1587012282000,
                    icon: "el-icon-files",
                    id: 13,
                    isHome: 0,
                    label: "房屋信息管理",
                    name: "HouseList",
                    orderNum: 1,
                    parentId: 0,
                    path: "/HouseList",
                    type: "1",
                    updateTime: 1586684646000,
                    url: "/system/HouseList"
                },
                {
                    children: [],
                    code: "sys:Owner",
                    createTime: 1586748705000,
                    icon: "el-icon-s-operation",
                    id: 11,
                    isHome: 0,
                    label: "业主信息管理",
                    name: "OwnerList",
                    orderNum: 3,
                    parentId: 0,
                    path: "/OwnerList",
                    type: "1",
                    updateTime: 1586748705000,
                    url: "/system/OwnerList"
                },
                {
                    children: [],
                    code: "sys:Pay",
                    createTime: 1586703272000,
                    icon: "el-icon-s-data",
                    id: 36,
                    isHome: 0,
                    label: "缴费信息管理",
                    name: "PayList",
                    orderNum: 1,
                    parentId: 34,
                    path: "/PayList",
                    type: "1",
                    updateTime: 1586683590000,
                    url: "/system/PayList"
                },
                {
                    children: [],
                    code: "sys:Park",
                    createTime: 1586683924000,
                    icon: "el-icon-tickets",
                    id: 37,
                    isHome: 0,
                    label: "车位信息管理",
                    name: "ParkList",
                    orderNum: 2,
                    parentId: 34,
                    path: "/ParkList",
                    type: "1",
                    updateTime: 1586683924000,
                    url: "/system/ParkList"
                },
                {
                    children: [],
                    code: "sys:Repair",
                    createTime: 1586703509000,
                    icon: "el-icon-copy-document",
                    id: 33,
                    isHome: 0,
                    label: "报修信息管理",
                    name: "RepairList",
                    orderNum: 2,
                    parentId: 17,
                    path: "/RepairList",
                    type: "1",
                    updateTime: 1586337139000,
                    url: "/system/RepairList"
                },
                {
                    children: [],
                    code: "sys:Complaint",
                    createTime: 1691464271000,
                    icon: "el-icon-s-custom",
                    id: 18,
                    isHome: 0,
                    label: "投诉信息管理",
                    name: "ComplaintList",
                    orderNum: 3,
                    parentId: 17,
                    path: "/ComplaintList",
                    type: "1",
                    updateTime: 1691565988000,
                    url: "/system/ComplaintList"
                },
                {
                    children: [],
                    code: "sys:role",
                    createTime: 1691464271000,
                    icon: "el-icon-rank",
                    id: 23,
                    isHome: 0,
                    label: "角色管理",
                    name: "roleList",
                    orderNum: 4,
                    parentId: 17,
                    path: "/roleList",
                    type: "1",
                    updateTime: 1691565988000,
                    url: "/system/Role/RoleList"
                },
                {
                    children: [],
                    code: "sys:menu",
                    createTime: 1691464271000,
                    icon: "el-icon-menu",
                    id: 28,
                    isHome: 0,
                    label: "权限管理",
                    name: "menuList",
                    orderNum: 5,
                    parentId: 17,
                    path: "/menuList",
                    type: "1",
                    updateTime: 1691565988000,
                    url: "/system/Menu/MenuList"
                }
            ];
            //保存菜单数据
            sessionStorage.setItem("menuList", JSON.stringify(menuList));
            //保存路由数据
            sessionStorage.setItem("routerList", JSON.stringify(routerList));
            //动态生成路由
            this.$store.commit("getMenuList", this.$router);
            //跳转到home页面
            this.$router.push("home");
        },
        //重置事件
        restSubmit() {
            this.$refs.loginForm.resetFields();
        }
    },
};
</script>

<style lang="scss" scoped>
.login-container {
    height: 100%;
}

.login-title {
    font-size: 24px;
    font-weight: 600;
}

.login-form {
    height: 300px;
    width: 350px;
    border-radius: 10px;
    box-shadow: 0 0 25px #cac6c6;
    padding: 20px 35px;
}

.login-container /deep/ .el-form-item__content {
    margin-left: 0 !important;
}

.my-button {
    width: 100%;
}
</style>
